<template>
  <div class="container">
    <div class="nav">
      <div class="image">
        <img src="../../assets/image/user.jpeg" />
      </div>
      <ul class="nav_item">
        <li><a href="" @click="go_teacher">管理老师</a></li>
        <li><a href="" @click="go_change">修改密码</a></li>
        <li><a href="" @click="go_login">退出登录</a></li>
        <li><a href="javascript:void(0)" class="last"></a></li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "sideManager",
  methods: {
    go_teacher() {
      this.$router.push("/managerHome/manageTeacher").catch((err) => err);
    },
    go_change() {
      this.$router.push("/managerHome/modpsw").catch((err) => err);
    },
    go_login() {
      if (confirm("确定退出登录？")) this.$router.push("/start/login");
      else return;
    },
  },
};
</script>

<style scoped>
* {
  margin: 0px;
  padding: 0px;
}
li {
  list-style: none;
}

.container {
  float: left;
  width: 255px;
  height: 934px;
}

.container .nav {
  position: fixed;
  width: 250px;
  height: 934px;
  background-color: hsla(0, 0%, 12%, 0.918);
}

.container .nav .image {
  width: 140px;
  height: 140px;
  margin: 18px 50px 2px;
  border: 2px solid white;
  border-radius: 50%;
  overflow: hidden;
}

.container .nav .image img {
  width: 100%;
  min-height: 100%;
}

.container .nav .nav_item {
  height: 760px;
  /* background-color: #0fa1e0; */
}

.container .nav .nav_item li {
  height: 150px;
  /* background-color: red; */
}
.container .nav .nav_item a {
  display: block;
  height: 150px;
  width: 250px;
  padding-left: 60px;
  background-color: #1f1f1f;
  text-decoration: none;
  color: #fff;
  font-size: 27px;
  line-height: 145px;
}

.nav .nav_item a:hover {
  background-color: #0fa1e0;
}

.container .nav .nav_item .last:hover {
  background-color: #1f1f1f;
}
</style>
